
<template>
	<div class="index">

		<div class="team">

				<div style="padding: 20px;">
					<el-button type="primary" plain round style="margin-right: 20px;" @click="newpersonlog = true">新建自定义岗位</el-button>
					<el-button type="primary" plain round style="margin-right: 20px;" @click="newdeplog = true">新建部门</el-button>
				</div>
				<div class="powertable" v-loading="loading">
					<div class="powerlist">
						<div class="powerth">所属部门</div>
						<div class="powerth">岗位名称</div>
						<div class="powerth">岗位描述</div>
						<div class="powerth">操作</div>
					</div>

					<div class="powerlist" v-for="item in list" :key="item.id">

						<div class="powertd">{{item.name}}</div>
						<div class="powertd">
							<div class="powerpostli" v-for="item2 in item.data"  :key="item2.id">{{item2.name}}</div>
						</div>
						<div class="powertd">
							<div class="powerpostli" v-for="item2 in item.data"  :key="item2.id">{{item2.description}}</div>
						</div>
						<div class="powertd" style="border-right: 0;">
							<div class="powerpostli"  v-for="item2 in item.data"  :key="item2.id">
                <el-button type="text" @click="daochuquanxian(item2)">导出订单信息权限</el-button>
								<!-- <el-button type="text" @click="fix(item2.id)">修改权限旧</el-button> -->
								<!-- <el-button type="text" @click="fixnew(item2.id)">修改权限</el-button> -->
								<el-button type="text" style="color: #2974FF;" @click="stop(item2.id,item2.name)">删除岗位</el-button>
							</div>
						</div>
					</div>
				</div>

				<el-dialog title="新建岗位" center class="log" :visible.sync="newpersonlog" width="510px" :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="false">
					<el-form ref="form" @submit.native.prevent :model="newperson" label-width="120px">
						  <el-form-item label="选择部门">
							<el-select v-model="newperson.department" placeholder="请选择部门">
							  <el-option v-for="item in departmentlist" :label="item.name" :key="item.id" :value="item.id"></el-option>
							</el-select>
						  </el-form-item>
						  <el-form-item label="岗位名称">
						  		<el-input v-model="newperson.name"></el-input>
						  </el-form-item>
						  <el-form-item label="岗位描述">
							<el-input type="textarea" v-model="newperson.desc"></el-input>
						  </el-form-item>
					</el-form>
				  <span slot="footer" class="dialog-footer">
					<el-button type="info" round @click="newpersonlog = false">取 消</el-button>
					<el-button type="danger" round @click="newpersongo">确 定</el-button>
				  </span>
				</el-dialog>

				<el-dialog title="新建部门" center class="log" :visible.sync="newdeplog" width="510px" :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="false">
					<el-form ref="form" @submit.native.prevent :model="newperson" label-width="120px">
						  <el-form-item label="部门名称">
						  		<el-input v-model="newdep.newdepname"></el-input>
						  </el-form-item>
					</el-form>
				  <span slot="footer" class="dialog-footer">
					<el-button type="info" round @click="newdeplog = false">取 消</el-button>
					<el-button type="danger" round @click="newdepgo">确 定</el-button>
				  </span>
				</el-dialog>

        <el-dialog title="导出订单信息权限" class="log" :visible.sync="daochulog" width="550px" :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="false">
        	<div>

            <div v-for="(item,index) in daochulist" :key="item.key" style="margin-bottom: 20px;">
              <div style="margin-bottom: 10px;">
                <el-checkbox v-model="item.value" :true-label="1" :false-label="0" @change="handleCheckAllChange($event, index)">{{item.title}}</el-checkbox>

                <!-- <el-checkbox v-model="item.quanxuanarr" @change="changedan">{{item.title}}</el-checkbox> -->
              </div>
              <div style="padding:  0 20px;">
                <el-checkbox-group v-model="item.quanxuanarr" @change="handleCheckedCitiesChange($event, index)">
                    <el-checkbox :label="item2.key" v-for="item2 in item.child" :key="item2.key" style="margin-bottom: 10px; width: 200px;">{{item2.title}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>


          </div>
          <span slot="footer" class="dialog-footer">
        	<el-button round @click="daochulog = false">取 消</el-button>
        	<el-button type="danger" round @click="daochuquanxiango()">确 定</el-button>
          </span>
        </el-dialog>

				<el-dialog title="new=====修改权限" center class="fixpost" :visible.sync="fixpersonlognew" width="810px" :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="false">
				   <!-- <el-tree :data="data" @check="postchoose" show-checkbox></el-tree> -->

					<div v-for="item in lists2" :name="item.id"  :key="item.id" v-if="item.id == 106?false:true"
					class="t_one_ji"
					>
						<div class="t_one_ji_item" ><input type="checkbox"  :value="item.id" v-model="checkList" @change="fixpost"/>{{item.name}}</div>
						<div style="border-left: 1px solid #D7D7D7;width: calc(100% - 150px);">
								<div v-for="item2 in item.data"   :key="item2.id" class="t_twoandthree" style="display: flex;">
									<div class="t_two_ji"><input type="checkbox"  :value="item2.id" v-model="checkList" @change="fixpost"/>{{item2.name}}</div>
									<div class="t_three_ji" >
											<div class="t_three_ji_item" v-for="item3 in item2.data"  :key="item3.id">
												<input type="checkbox" :value="item3.id" v-model="checkList" @change="fixpost"/>{{item3.name}}
											</div>

									</div>
								</div>
						</div>
					</div>

            <!-- <el-tree ref="tree" :props="defaultProps" :data="lists2" show-checkbox @check-change="handleCheckChange" node-key="id" :default-checked-keys="dkeys"></el-tree> -->

					<span slot="footer" class="dialog-footer">
						<el-button type="info" round @click="fixpersonlog = false">取 消</el-button>
						<el-button type="danger" round @click="fixpersongo">保存</el-button>
					</span>
				</el-dialog>

				<el-dialog title="修改权限" center class="fixpost" :visible.sync="fixpersonlog" width="810px" :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="false">
				   <!-- <el-tree :data="data" @check="postchoose" show-checkbox></el-tree> -->
					<div>
						<el-collapse v-model="activeNames" accordion>
							  <el-collapse-item v-for="item in lists2" :name="item.id"  :key="item.id" v-if="item.id == 106?false:true">
								<template slot="title"><input type="checkbox" class="checkinput" :value="item.id" v-model="checkList" @change="fixpost"/>{{item.name}}</template>
								<div style="margin-left: 30px;">
									<el-collapse v-model="activeNames" >
										<el-collapse-item v-for="item2 in item.data" :name="item2.id"  :key="item2.id">
											<template slot="title"><input type="checkbox" class="checkinput" :value="item2.id" v-model="checkList" @change="fixpost"/>{{item2.name}}</template>
											<div class="list3" style="margin-left: 4px;">
												<div class="checkul">
													<div class="checkli"  v-for="item3 in item2.data"  :key="item3.id">
														<input type="checkbox" :value="item3.id" v-model="checkList" @change="fixpost"/>{{item3.name}}
													</div>
												</div>
											</div>
										</el-collapse-item>
									</el-collapse>
								</div>
							  </el-collapse-item>
						</el-collapse>

            <!-- <el-tree ref="tree" :props="defaultProps" :data="lists2" show-checkbox @check-change="handleCheckChange" node-key="id" :default-checked-keys="dkeys"></el-tree> -->

					</div>
					<span slot="footer" class="dialog-footer">
						<el-button type="info" round @click="fixpersonlog = false">取 消</el-button>
						<el-button type="danger" round @click="fixpersongo">保存</el-button>
					</span>
				</el-dialog>
			</div>
	</div>

</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
import { set } from 'lodash'
	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot
		},
		name : "gangweiguanli",
		data(){
			return {
        checkList:[],
        defaultProps: {
          children: 'data',
          label: 'name'
        },
        datalist:[],
        dkeys:[],

				data:[],
				loading:true,

				newpersonlog:false,
				newperson:{
					name:"",
					department:"",
					desc:""
				},
				fixpersonlog:false,
				fixpersonlognew:false,
				fixperson:{
					name:"",
					department:"",
					desc:""
				},
				newdeplog:false,
				newdep:{
					level:2,
					newdepname:""
				},

				list:[],
				datas:[],
				lists:{},
				lists2:{},
				departmentlist:[],

				ids:[],

				activeNames:["1"],
				checkList:[],
				chooseid:"",

                superman:false,
                shop_id:"",
                daochuall:{
                  permission:[],
                  permission_id:""
                },
                daochulist:[],
                daochulog:false
			}
		},
		created() {
            axios.get('/api/gth/user/shop')
                .then(response => {
                    if(response.data.msg.code == 0){
                        this.shop_id = response.data.data.shop_id
                    }else{
                        if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
                        that.$message.error(response.data.msg.info);
                    }
                })
			//权限问题
			var user = JSON.parse(localStorage.getItem('USER'));
            if(this.shop_id == 50481 || this.shop_id == 304676){
                this.superman = true
			}

			var shop = JSON.parse(localStorage.getItem('USER'));
			this.memid = shop.id
		},
		mounted(){
			this.getdepartment()
			this.getlist()
			// this.getlists()
			this.getlists2()
		},
		methods: {
      daochuquanxian:function(item){
        this.daochuall.permission_id = item.id
        this.daochuall.permission = []
        axios.get('/api/get/export/permission?permission_id='+item.id)
          .then(response => {
        		if(response.data.msg.code == 0){
              this.daochulist = response.data.data

              this.daochulist.forEach(item=>{
                this.$set(item,'quanxuan',true)
                this.$set(item,'quanxuanarr',[])

                if(item.child.length > 0){
                  item.child.forEach(item2=>{
                    if(item2.value == 1){
                      item.quanxuanarr.push(item2.key)
                    }
                    if(item2.value == 0){
                      item.quanxuan = false
                    }
                  })
                }else{
                  item.quanxuan = false
                }

              })

              console.log(this.daochuall)
              // this.daochuall = {
              //   permission_id:item.id,
              //   export_commission:item.export_commission,
              //   export_plaintext:item.export_plaintext,
              //   export_commission_new:item.export_commission_new
              // },
              this.daochulog = true
        		}else{
        			this.$message.error(response.data.msg.info);
        		}
          })

        // this.daochuall = {
        //   permission_id:item.id,
        //   export_commission:item.export_commission,
        //   export_plaintext:item.export_plaintext,
        //   export_commission_new:item.export_commission_new
        // },
        // this.daochulog = true
      },

      handleCheckAllChange(e,index) {
        console.log(e)
        console.log(index)


        if(e){
          this.daochulist[index].quanxuanarr = []
          this.daochulist[index].child.forEach(item=>{
            this.daochulist[index].quanxuanarr.push(item.key)
          })
          this.daochulist[index].quanxuan = true
        }else{
          // this.daochulist[index].quanxuan = false
        }


        // this.checkedCities = val ? cityOptions : [];
        // this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(e,index) {

        // if(this.daochulist[index].quanxuanarr.length > 0 && this.daochulist[index].quanxuanarr.length == this.daochulist[index].child.length){
        //   this.daochulist[index].quanxuan = true
        // }else{
        //   this.daochulist[index].quanxuan = false
        // }

      },

      daochuquanxiango:function(){


        let obj = {
          permission_id:this.daochuall.permission_id,
          permission:{}
        }

        this.daochulist.forEach(item=>{
          console.log(item.value)
          if(item.value == 1){
            obj.permission[item.key] = 1
          }
          if(item.child.length > 0 && item.quanxuanarr.length > 0){
            item.quanxuanarr.forEach((item2,index2)=>{
              item.child.forEach((item3,index3)=>{
                if(item2 == item3.key){
                  obj.permission[item3.key] = 1
                }
              })

            })
          }
        })

        obj.permission = JSON.stringify(obj.permission)

        axios.post('/api/save/export/permission',obj)
          .then(response => {
        		if(response.data.msg.code == 0){
              this.$message.success('操作成功');
              this.daochulog = false
              this.getlist()
        		}else{
        			this.$message.error(response.data.msg.info);
        		}
          })
      },
			//新建部门
			newdepgo:function(){
				var params = new URLSearchParams();
				params.append('level',2);
				params.append('name',this.newdep.newdepname);
				axios.post('/api/plan-market/permission/add', params)
				  .then(response => {
						if(response.data.msg.code == 0){
							this.newdeplog = false
							this.getdepartment();
                            this.$message({
                            	type: 'success',
                            	message: '部门创建成功!'
                            });
						}else{
							this.$message.error(response.data.msg.info);
						}
				  })
			},
			//绑定权限
			fixpost:function(){
				console.log(this.checkList)
			},
			//获取部门
			getdepartment:function(){
				axios.get('/api/plan-market/permission/list?level=2')
					.then(response => {
						if(response.data.msg.code == 0){
							this.departmentlist = response.data.data.data
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},
			//获取岗位
			getpost:function(){
				axios.get('/api/plan-market/permission/list?level=3&parent_id='+this.newperson.department)
					.then(response => {
						if(response.data.msg.code == 0){
							this.postlist = response.data.data.data
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},

			//获取功能列表
			getlists2:function(){
				axios.get('/api/functions/lists?new=1')
					.then(response => {
						this.lists2 = response.data.data

            this.lists2.forEach((item,index)=>{
              if(item.name == '产品销售中心'){
                this.lists2.splice(index,1)
              }
            })

			console.log('权限列表')
			console.log(this.lists2)
					})
			},
			//获取功能列表
			getlists:function(){
				axios.get('/api/functions/lists?new=1')
					.then(response => {
						if(response.data.msg.code == 0){
							this.lists = response.data.data
							this.loading = false
							var sj = response.data.data
							var ch = []
							for( var i in sj){
								var ch2 = []
								var obj1 = {id:sj[i].id,label:sj[i].name,children:ch2}
								var sj2 = sj[i].data
								for( var i2 in sj2){

									var ch3 = []
									var obj2 = {id:sj2[i2].id,label:sj2[i2].name,children:ch3}
									var sj3 = sj2[i2].data
									for( var i3 in sj3){
										var obj3 = {id:sj3[i3].id,label:sj3[i3].name}
										ch3.push(obj3)
									}
									ch2.push(obj2)
								}
								ch.push(obj1)
							}
							this.data = ch
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},
			//获取列表
			getlist:function(){
				axios.get('/api/plan-market/ros/list')
					.then(response => {
						if(response.data.msg.code == 0){
							this.list = response.data.data
							this.loading = false
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},

			//选择权限
			postchoose:function(data){
				// if(!data.children){
				// 	if(this.ids.indexOf(data.id)>0){
				// 		this.ids.splice(this.ids.indexOf(data.id),1)
				// 	}else{
				// 		this.ids.push(data.id)
				// 	}
				// }
				console.log(data)
			},
			//删除岗位
			stop:function(id,name){
				this.$confirm('删除"'+name+'"岗位，会影响该岗位下所有员工的使用，是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					var params = new URLSearchParams();
					params.append('id',id);
					axios.post('/api/plan-market/permission/delete', params)
					  .then(response => {
							if(response.data.msg.code == 0){
								this.loading = true
								this.$message({
									type: 'success',
									message: '删除岗位成功!'
								});
								this.getlist()
							}else{
								this.$message.error(response.data.msg.info);
							}
					  })
				})
			},
			//修改账户信息
			fixpersongo:function(){

        // const checkedNodes = this.$refs.tree.getCheckedNodes();
        // let arr = []
        // checkedNodes.forEach(item=>{
        //   arr.push(item.id)
        // })

				axios.post('/api/permission/func', {permission_id:this.chooseid,func_ids:this.checkList})
				  .then(response => {
						if(response.data.msg.code == 0){
							this.fixpersonlog = false
							this.checkList = ""

              this.$message({
              	type: 'success',
              	message: '修改成功!'
              });
						}else{
							this.$message.error(response.data.msg.info);
						}
				  })
			},
			//修改权限
			fix:function(id){
				this.fixpersonlog = true
				this.chooseid = id

				axios.get('/api/functions/permission/list?id='+id)
					.then(response => {
						if(response.data.msg.code == 0){

							this.checkList = ""
							var arr = []
							for( var i in response.data.data){
								arr.push(response.data.data[i].func_id)
							}
							this.checkList = arr

							console.log('this.checkList')
							console.log(this.checkList)
              // this.dkeys = []
              // response.data.data.forEach(item=>{
              //   this.dkeys.push(item.func_id)
              // })

						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},
			fixnew:function(id){

				this.$router.push({ path: "/zhanghuguanli/quanxianguanli?id="+id });

				return


				this.fixpersonlognew = true
				this.chooseid = id

				axios.get('/api/functions/permission/list?id='+id)
					.then(response => {
						if(response.data.msg.code == 0){

							this.checkList = ""
							var arr = []
							for( var i in response.data.data){
								arr.push(response.data.data[i].func_id)
							}
							this.checkList = arr

							console.log('this.checkList')
							console.log(this.checkList)
              // this.dkeys = []
              // response.data.data.forEach(item=>{
              //   this.dkeys.push(item.func_id)
              // })

						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},
			//新建岗位
			newpersongo:function(){
				var params = new URLSearchParams();
				params.append('level',3);
				params.append('parent_id',this.newperson.department);
				params.append('name',this.newperson.name);
				params.append('description',this.newperson.desc);
				axios.post('/api/plan-market/permission/add', params)
				  .then(response => {
						if(response.data.msg.code == 0){
							this.newpersonlog = false
							this.loading = true
							this.getlist();
                            this.$message({
                            	type: 'success',
                            	message: '岗位创建成功!'
                            });
						}else{
							this.$message.error(response.data.msg.info);
						}
				  })
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
        // input[type="checkbox"]::before {
        //   content: " ";
        //   position: absolute;
        //   top: 0;
        //   left: 0;
        //   background: #fff;
        //   width: 100%;
        //   height: 100%;
        //   border: 1px solid #d9d9d9;
        //   border-radius: 3px;
        //   padding: 2px;
        // }
        // /** 选中的样式 */
        // input[type="checkbox"]:checked::before {
        //   content: "✓";   /* 2713表示勾勾✓ */
        //   position: absolute;
        //   top: 0;
        //   left: 0;
        //   width: 100%;
        //   height: 100%;
        //   background: #2974FF;
        //   border: 1px #2974FF solid;
        //   color: #fff;
        //   font-size: 12px;
        //   font-weight: bold;
        //   text-align: center;
        //   display: flex; justify-content: center; align-items: center;
        //   padding: 2px;
        //   border-radius: 3px;
        // }


  .log input{ width: 250px !important;}
  /deep/ .fixpost .el-collapse-item__header{ width: 200px; line-height: 40px; height: 40px; border: none;}
  /deep/ .fixpost .el-collapse{ border: none;}
  /deep/ .fixpost .el-collapse-item__wrap{ border: none;}
  /deep/ .fixpost .el-collapse-item__arrow{ line-height: 40px;}
  /deep/ .fixpost .el-collapse-item__content{ padding-bottom: 0;}
	.team{ background-color: #fff; }
	/deep/ .el-button--danger {
	     color: #FFF;
	     background-color: #2974FF;
	     border-color: #2974FF;
	 }

	.powertop {
	  display: flex;
	  background:#f9f9f9;
	}

	.powertopli {
	  flex-basis: 180px;
	  line-height: 50px;
	  border-bottom: 3px #F9F9F9 solid;
	  color: #727272;
	  border-right: 1px #F9F9F9 solid;
	  font-size: 16px;
	  text-align: center;
	}

	.powertopact {
	  background: #FFFFFF;
	  border-bottom: 3px #2974FF solid;
	}

	.powercon{ background: #FFFFFF; padding: 20px 40px; justify-content: space-between; display: flex;}
	.powerbtn{ flex-basis: 320px; display: flex;}
	.powersearch{ flex-basis: 250px;}
	.powerlist{ display: flex; text-align: center; padding: 0 20px;
        	line-height: 60px; }
	.powerth{ flex: 1; background: rgb(246, 246, 246); color: rgb(86, 86, 86); font-size: 14px; border-right: 1px #EAEAEA solid; line-height: 45px;}
	.th1{ flex-basis: 80px; max-width: 80px;}
	.powertd{ flex: 1; display: flex; flex-wrap: wrap; color: #888888; background: #FFFFFF;
	font-size: 14px; border-bottom: 1px #EAEAEA solid;border-right: 1px #EAEAEA solid; align-items: center; justify-content: center;}
	.fenye{ text-align: right; margin: 20px 0;}
	.powerpostli{width: 100%; line-height: 41px; padding: 5px; height: 51px; overflow: hidden; border-bottom: 1px #EAEAEA solid; margin-bottom: -1px;}
	.checkul{ display: flex; flex-wrap: wrap;}
	.checkli{ margin-left: 20px; line-height: 30px; color: #666;}
	.checkli input{ margin-right: 5px; position: relative; top: 2px;}
	.powerlistli{ font-size: 14px; border: none;}
	.checkinput{ margin-right: 12px; position: relative; top: -4px;}
</style>
<style  scoped="scoped">
.t_one_ji{
	border: 1px solid #D7D7D7;
	border-bottom:none;
	display: flex;
}
.t_one_ji:last-child{
	border-bottom: 1px solid #D7D7D7;
}
.t_two_ji{
	width: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #F2F8FF;
}
.t_twoandthree{
	border-bottom:1px solid #D7D7D7;
}

.t_twoandthree:last-child{
	border-bottom: none;
}
.t_three_ji{
	border-left:1px solid #D7D7D7;
	width: calc(100% - 200px);
	min-height: 80px;
	display: flex;
	flex-wrap: wrap;
}
.t_three_ji_item{
	margin: 20px;
	display: flex;
	align-items: center;
}
.t_checkinput{
	margin-top: 0 ;
}
.t_one_ji_item{
	width: 150px;
	display:flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	background-color: #F2F8FF;
}
</style>
